<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>

    //加法
    function fAdd() {
        let a = getFristNum();
        let b = getSecondNum();
        //+的两种运用，1：当两边都为Number类型时为运算符+，否则为字符串拼接
        let re = Number(a) + Number(b);
        fResults(re);
    }

    //减法
    function fSubtract() {
        let a = getFristNum();
        let b = getSecondNum();
        let re = a - b;
        fResults(re);
    }

    //乘法
    function fRide() {
        let a = getFristNum();
        let b = getSecondNum();
        let re = a * b;
        fResults(re);
    }

    //除法
    function fDevide() {
        let a = getFristNum();
        let b = getSecondNum();
        let re = a / b;
        fResults(re);
    }

    //传值
    function fResults(re) {
        var num = document.getElementById("result")
        num.innerHTML = re;
    }

    //获取文本框的值
    function getFristNum() {
        let a = document.getElementById("frist").value;
        return a;
    }

    function getSecondNum() {
        let b = document.getElementById("second").value;
        return b;
    }

</script>

<body>
    <p>简单计算器:</p>
    <table border="1">
        <tr>
            <td>第一个数</td>
            <td><input type="text" id="frist" /></td>
        </tr>
        <tr>
            <td>第二个数</td>
            <td><input type="text" id="second" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="+" id="add" onclick="fAdd()">
                <input type="button" value="-" id="subtract" onclick="fSubtract()">
                <input type="button" value="*" id="ride" onclick="fRide()">
                <input type="button" value="/" id="devide" onclick="fDevide()">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <p id="result"></p>
            </td>
        </tr>
    </table>
</body>

</html>